<template>
	<div class="songlist">
		<el-table
			:data="songList"
			style="width: 100%"
		>
			<el-table-column label="收藏" width="60">
				<template #default="scope">
					<IconPark class="icon-like"
					:icon="Like" 
					theme="filled"
					size="16"
                    @click="cancelLike(scope.row.id)" />
				</template>
			</el-table-column>
			<el-table-column label="音乐名" min-width="300">
  				<template #default="scope">
					<p style="cursor: pointer" @click="navigateToSongDetail(scope.row.id)">{{ getSongTitle(scope.row.name) }}</p>
  				</template>
			</el-table-column>
            <!-- v-if="showArName" -->
			<el-table-column  prop="" label="歌手" min-width="160">
				<template #default="scope">
					{{ getSingerName(scope.row.name) }}
				</template>
			</el-table-column>
			<el-table-column prop="source" label="来源" min-width="200">
				<template #default="scope">
					{{ scope.row.source }}
					<!-- <span class="clickable" @click="toAlbumDetails(scope.row.al.id)">{{ scope.row.al.name }}</span> -->
				</template>
			</el-table-column>
			<el-table-column prop="duration" label="时长" min-width="80">
				<template #default="scope">
					<span>{{ useFormatDuring(scope.row.duration) }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup lang="ts">
import {useFormatDuring} from '@/utils/format'
import { ref } from "vue"
import IconPark from "./IconPark.vue";
import { Like } from '@icon-park/vue-next';
import { getLikeList, deleteLike } from "@/api";
import { useSongStore } from '@/store/song';
const { getSongTitle, getSingerName } = useSongStore();
import { useUserStore } from "@/store/user"
import { useRouter } from 'vue-router';
const router = useRouter();
const { userId, MusicList } = useUserStore();

const songList = ref([])

getInit()
async function getInit() {
    songList.value = await getLikeList({type: 1, userId})
}

async function cancelLike(id: number) {
    // await deleteLike({type: 1, userId,likeId: id})
    await MusicList(1, id)
    getInit()
}

const navigateToSongDetail = (id:number) => {
      router.push({ name: '歌曲详情', params: { id } });
}
</script>

<style lang="less" scoped>
.icon-like {
    color: red;
    cursor: pointer;
}
</style>